@import "common.less";
@import "directive.less";

.navDirective{
    width:@contentWidth;
    margin:0 auto;
    height:80px;
    // background:lightBlue;
    .logoBox{
        height:80px;
        line-height:80px;
        img{
            height:40px;
            vertical-align:middle;
        }
    }
    ul{
        height: 80px;
        li{
            border:1px solid transparent;
            border-top:3px solid transparent;
            position:relative;
            z-index:100;
            height: 80px;
            a{
                font-size:16px;
            }
            margin:0 10px;
            &>a{
                display:block;
                height:80px;
                line-height:80px;
                width:120px;
                text-align:center;   
            }
            &:hover{
                border:1px solid #e5e5e5;
                border-top:3px solid @mainColor;
            }
            .secondNav{
                background:#fff;
                width:120px;
                position:absolute;
                top:77px;
                left:0;
                z-index:100;
                .navItem{
                    a{
                        line-height:40px;
                        display:block;
                        text-align:center;
                        &:hover{
                            color:@mainColor;
                            background:#eff3f5;
                            font-weight:bold;
                        }
                    }
                }
            }
        }
    }
    .schoolSelect{
        &>a{
            width:120px;
            border:1px solid @mainColor;
            border-radius:10px;
            color:@mainColor;
            outline:none;
            i{
                margin-left:10px;
            }
        }
        div.schoolContainer{
            position:relative;
            top:-20px;
            z-index:100;
            background:#fff;
            border:1px solid #e5e5e5;
            a{
                display:block;
                line-height:40px;
                text-align:center;
                &:hover{
                    color:@mainColor;
                    background:#eff3f5;
                    // font-weight:800;
                }
            }
        }
    }
}
.footerDirective{
    width:100%;
    height:150px;
    background:lightGreen;
}
.carouselDirective{
    .arrowLeft,.arrowRight{
        font-size:40px;
    }
    .carouselBox{
        ul{
            li{
              
                .carouselImgBox{
                    text-align:center;
                }
            }
        }
    }
}
.breadcrumbDirective{
    background-color: rgb(247, 248, 248);
    .container{
        width: @contentWidth;
        height: 50px;
        ul{
            width: 100%;
            li{
                height: 50px;
                line-height: 50px;
                color: rgb(191, 191, 191);
                a{
                    display: block;
                    font-size: 14px;
                    color: rgb(191, 191, 191);
                }
            }
        }
    }
}
.leftNavDirective{
    &>.list-title{
               width: 200px;
               height: 140px;
               background-color: rgb(65, 169, 238);
               padding: 45px 30px;
            //    position: absolute;
            //    top: -140px;
                &>p{
                   text-align: center;
                   color: rgb(255, 255, 255);
                   margin: 0;
               }
                &>p:first-child{
                    font-size: 24px;
                      
               }
                &>p:nth-child(2){
                    font-size: 22px;
               }
           }
    &>.list{
               margin-top: 40px;
            width: 200px;
            &>ul{
                width: 200px;
                background-color: rgb(249, 251, 253);
                &>li{
                    height: 50px;
                    line-height: 50px;
                   &>a{
                        display: block;
                        width: 200px;
                        height: 50px;
                        text-align: center;
                        color: rgb(51, 51, 51);
                        font-size: 16px;
                    }
                }
                &>li.active{
                    &>a{
                        background-color: rgb(242, 105, 14);
                        color: rgb(255, 255, 255);
                    }
                }
              }
           }
}
.employDirective{
    border-bottom: 1px solid #cccccc;
    &>.top{
        height: 110px;
        padding: 20px 0;
        &>.left{
            &>p{
            font-size: 18px;
            color: rgb(51, 51, 51);
            margin-bottom: 20px;
            }
            &>div{
                color: rgb(102, 102, 102);
            }
        }
        &>.right{
            p{
                color: rgb(51, 51, 51);
                height: 70px;
                line-height: 70px;
                span:nth-child(2){
                    display: inline-block;
                    width: 12px;
                    height: 7px;
                    background: url('../images/jiantou.png') 0 0 no-repeat;
                    margin-left: 55px;
                }
                &.active{
                    color: rgb(52,152, 219);
                    span:nth-child(2){
                        background:  url('../images/jiantou.png') 0 -17px no-repeat;
                    }
                }
            }
        } 
    }
    &>.bottom{
        &>p{
            color: rgb(51, 51, 51);
            font-size: 14px;
        }
        &>ul.claim{
            list-style: circle!important;
            margin-bottom: 20px;
                &>li{
                height: 30px;
                line-height: 30px;
                font-size: 14px;
            }
        }
    }
}
.bannerDirective{
    .bannerContainer{
        position:relative;
        overflow:hidden;
        &>ul{
           
            // height:510px;
            
            position:relative;
            left:0;
             transition:left 0.3s;
            // z-index:-10;
            li{
                // position:absolute;
                // top:0;
                // left:0;
                width: 100%;
            }
        }
        .arrowLeft,.arrowRight{
            position:absolute;
            top:49%;
            .iconfont{
                font-size:40px;
            }
        }
        .arrowLeft{
            left:0;
        }
        .arrowRight{
            right:0;
        }
        .bannerList{
            position:absolute;
            bottom:10px;
            left:48%;
            span{
                display:block;
                width:10px;
                height:10px;
                border-radius:50%;
                background:#fff;
                margin:0 3px;
                &.active{
                    background:@mainColor;
                }
            }
        }
    }   
}
.bannerShowDirective{
    .bannerShowContainer{
        img{
            width:100%;
        }
        .left{
            width:250px;
        }
        .right{
            width:1000px;
            height:150px;
            overflow:hidden;
            a{
                display:block;
                padding:10px 20px;
                color:#fff;
            }
            
        }
    }
    .bannerList{
        padding:0 50px;
        position:relative;
        margin-top:20px;
        div{
            width:1150px;
            overflow:hidden;
            ul{
                position:relative;
                li{
                    border:1px solid transparent;
                    width:230px;
                    padding:20px 20px;
                    a{
                        img{
                            width:100%;
                        }
                    }
                    &.active{
                        border:1px solid #fff;
                    }
                }
            }
        }
        .arrowLeft,.arrowRight{
            position:absolute;
            top:49%;
        }
        .arrowLeft{
            left:0;
        }
        .arrowRight{
            right:0;
        }
    }
}
.slideDirective{
    width:1000px;
    margin:0 auto;
    .content{
        position:relative;
        a{ 
            display:block;
            width:100%;   
            img{
                width:100%;
            }
        }
        .textContent{
            height:100px;
            width:100%;
            padding:10px;
            position:absolute;
            bottom:0;
            background:rgba(255,255,255,0.8);
            line-height:25px;
        }
    }
    .list{
        width:800px;
        margin:0 auto;
         overflow:hidden;
        
        ul{
            // width:1000px;
           position:relative;
            left:0;
            // transition:left 1s;
            li{
                width:200px;
                padding:5px 15px;
                height:100px;
                line-height:100px;
                img{
                    width:100%;
                    cursor:pointer;
                    padding:5px;
                    border:1px solid #e5e5e5;
                    &.active{
                        border-color:#e4393c;
                    }
                }
                
            }
        }
        
    }
     .arrowLeft,.arrowRight {
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        cursor:pointer;
            .iconfont{
                font-size:30px;
                color:#666;
            }
        }
}
.headerTitle{
    background:#000;
    color:#fff;
    height:30px;
    line-height:30px;
    &>div{
        width:@contentWidth;
        margin:0 auto;
        span{
            color:@mainColor;
            margin-right:5px;
        }
        .select{
            display:inline-block;
            margin-left:5px;
            position:relative;
            width:100px;
            text-align:center;
             a{
                display:inline-block;
                color:#fff;
                font-size:12px;
                .iconfont{
                    font-size:12px;
                }
                span{
                    color:#fff;
                }
            }
            ul{
                position:absolute;
                top:30px;;
                left:0;
                z-index:1000;
                background:#fff;
                // padding:0 10px;
                li{
                    a{
                        font-size:14px;
                        display:block;
                        width:100px;
                        color:#333;
                        text-align:center;
                        &:hover{
                            color:@mainColor;
                        }
                    }
                }
                
            }
        }
       
    }
}
section{
    width:@contentWidth;
    
}
section#home{
        padding-bottom:40px;
        width:100%;
        .banner{
            width:100%;
            img{
                width:100%;
            }
        }
        .news{
            .newsSelect{
                border-bottom:1px solid #e5e5e5;
                margin-bottom:50px;
                .newsSelectBox{
                    width:420px;
                    margin:0 auto;
                    margin-bottom:30px;
                    .newsSelectItem{
                        width:120px;
                        height:40px;
                        margin:0 10px;
                        line-height:40px;
                        text-align:center;
                        cursor: pointer;
                        &.active{
                            background:@mainColor;
                            color:#fff;
                            border-radius:5px;
                            i{
                                display:block;
                                width:10px;
                                margin:0 auto;
                                border:10px solid transparent;
                                border-top-color:@mainColor;
                            }
                            b{
                                display:block;
                                width:15px;
                                height:15px;
                                border:2px solid @mainColor;
                                border-radius:50%;
                                margin:0 auto;
                                position:relative;
                                top:3px;
                                background:#fff;
                            }
                        }
                    }
                }
            }
            .carouselDirective{
                width:@contentWidth;
                margin:0 auto;
                .arrowLeft{
                    position:relative;
                    top:100px;
                }
                .arrowRight{
                    position:relative;
                    top:90px;
                }
                .carouselBox{
                    width:1200px;
                    height:300px;
                    overflow:hidden;
                    .carouselItem{
                        width:400px;
                        padding:0 20px;
                        .carouselTextContent{
                            .carouselItemTextTitle{
                                line-height:30px;
                                margin-bottom:10px;
                                // text-align:center;
                                i{
                                    display:inline-block;
                                    width:10px;
                                    height:10px;
                                    border-radius:5px;
                                    background:@mainColor;
                                    margin:0 5px;
                                }
                            }
                            .carouselItemTextContent{
                                height:100px;
                                overflow:hidden;
                                font-size:12px;
                                line-height:20px;
                            }
                        }
                        
                    }
                }
            }
        }
        .admissions{
            .carouselDirective{
                overflow:hidden;
               padding:10px 0;
                .carouselItem{
                    padding:20px 10px;
                    width:170px;
                    
                    border:1px solid transparent;
                    text-align:center;
                    .carouselImgBox{

                        
                        img{
                        // width:100%;
                            width:90px;
                            vertical-align:middle;
                            margin-bottom:20px;
                        }
                    }
                    //  margin-right:5px;
                    
                    &:hover{
                        border:1px solid #e5e5e5;
                        box-shadow:2px 2px 5px  #666;
                    }
                }
            }
            
        }
        // .studentZone{
        //     width:100%;
        //    padding-bottom:50px;
        //     position:relative;
        //     a{
        //         color:#fff;
        //     }
        //     &>img{
        //         width:100%;
        //         position:absolute;
        //         top:0;
        //         left:0;
        //         z-index:-100;
        //     }
        //     .title{
        //         color:#fff;
        //     }
        //     .title2{
        //         width:500px;
        //         margin:0 auto;
        //         margin-bottom:30px;
        //         text-align:center;
        //         a{
        //             display:inline-block;
        //             width:100px;
        //             text-align:center;
        //             margin-right:25px;
        //             line-height:30px;
        //             color:#aaa;
        //             &.active{
        //                 color:#fff;
        //             }
        //         }
        //     }
        //      .carouselDirective{
        //         width:@contentWidth;
        //         margin:0 auto;
               
        //         .arrowLeft{
        //             position:relative;
        //             top:44px;
        //             color:#fff;
        //         }
        //         .arrowRight{
        //             position:relative;
        //             top:44px;
        //             color:#fff;
        //         }
        //         .carouselBox{
        //             width:1200px;
        //             height:168px;
        //             overflow:hidden;
        //             ul{
        //                 width:5000px;
        //                 height:150px;
        //             }
        //             .carouselItem{
        //                 width:300px;
        //                 padding:0 20px;
        //                 .carouselTextContent{
        //                     .carouselItemTextTitle{
        //                         line-height:30px;
        //                         margin-bottom:10px;
        //                         text-align:center;
        //                         i{
        //                             display:inline-block;
        //                             width:10px;
        //                             height:10px;
        //                             border-radius:5px;
        //                             background:@mainColor;
        //                             margin:0 5px;
        //                         }
        //                     }
        //                     .carouselItemTextContent{
        //                         height:100px;
        //                         font-size:12px;
        //                         line-height:20px;
        //                     }
        //                 }
                        
        //             }
        //         }
        //     }
        //     &>a{
        //         display:block;
        //         padding:0;
        //         margin:0 auto;
        //         width:150px;
        //         height:40px;
        //         line-height:40px;
        //         border:1px solid #fff;
        //         margin-top:50px;
        //     }
        // }
        .enviroment{
            width:@contentWidth;
            margin:0 auto;
            margin-top:50px;
        }
        .university{
            .carouselDirective{
                width:@contentWidth;
                margin:0 auto;
                .arrowLeft{
                    position:relative;
                    top:100px;
                }
                .arrowRight{
                    position:relative;
                    top:90px;
                }
                .carouselBox{
                    width:1274px;
                    overflow:hidden;
                    .carouselItem{
                        width:182px;
                        // padding:0 20px;
                        .carouselImgBox{
                            padding:30px 0;
                            div{
                                margin-top:20px;
                            }
                            &:hover{
                                background:@secondColor;
                                color:#fff;
                            }
                        }
                        .carouselTextContent{
                            .carouselItemTextTitle{
                                line-height:30px;
                                margin-bottom:10px;
                                i{
                                    display:inline-block;
                                    width:10px;
                                    height:10px;
                                    border-radius:5px;
                                    background:@mainColor;
                                    margin:0 5px;
                                }
                            }
                            .carouselItemTextContent{
                                height:100px;
                                font-size:12px;
                                line-height:20px;
                            }
                        }
                        
                    }
                }
            }
        }
        .introduce{
            width:@contentWidth;
            margin:0 auto;
            .playerBox{
                width:370px;
                height:250px;
                background:#000;
            }
            .introduceText{
                width:910px;
                height:250px;
                margin-bottom:30px;
                &>div{
                    padding:20px 0 20px 50px ;
                    height:200px;
                    position:relative;
                    line-height:25px;
                    overflow:hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 7;
                    -webkit-box-orient: vertical;
                    p{
                        padding:0;
                        margin-bottom:0;
                        text-indent:2em;
                    }
                }
                // &>div::after{
                //     content:"...";
                //     // font-weight:bold;
                //     position:absolute;
                //     bottom:5px;
                //     right:0px;
                //     padding-left:30px;
                //     background: -webkit-linear-gradient(left, transparent, #fff 55%);
                //     background: -o-linear-gradient(right, transparent, #fff 55%);
                //     background: -moz-linear-gradient(right, transparent, #fff 55%);
                //     background: linear-gradient(to right, transparent, #fff 55%);
                // }
                a{
                    display:block;
                    width:200px;
                    height:40px;
                    margin:0 auto;
                    line-height:40px;
                    background:@mainColor;
                    color:#fff;
                    text-align:center;
                    border-radius:5px;
                    margin-top:10px;
                }
            }
        }
        .title{
            width:@contentWidth;
            text-align:center;
            margin:0 auto;
            font-size:24px;
            line-height:40px;
            padding:50px 0;
        }
    }

#detail{
    background:#F7F8F8;
    padding:30px 0;
    .detailContent{
        width:1000px;
        margin:0 auto;
        background:#fff;
        padding:30px;
        // text-align:left;
    }
    img{
        margin:0 auto;
    }
}
.moveDirective{
    width:100%;
    position:relative;
    margin-top:50px;
    ul{
        width:1000px;
        margin:0 auto;
        position:relative;
        li{
            position:absolute;
            transition:all 1s;
            img{
                width:100%;
            }
        }
        li:nth-child(1){
            width:400px;
            z-index:10;
            left:0;
            top:57px;
        }
        li:nth-child(2){
            width:600px;
            z-index:100;
            left:200px;
            
        }
        li:nth-child(3){
            width:400px;
            z-index:10;
            left:600px;
            top:57px;
        }
        li:nth-child(4){
            width:400px;
            z-index:5;
            left:100px;
            top:57px;
        }
        li:nth-child(5){
            width:400px;
            z-index:5;
            left:100px;
            top:57px;
        }
    }
    .arrowLeft .iconfont,.arrowRight .iconfont{
        font-size:32px;
        cursor:pointer;
    }
    .arrowLeft,.arrowRight{
        position:absolute;
        top:210px;
    }
    .arrowLeft{
        left:0;
    }
    .arrowRight{
        right:0;
    }
}

.selectCondition{
    a{
        border:1px solid transparent;
        padding-left:5px;
        padding-right:5px;
        line-height:35px;
        height:35px;
        // position:relative;
        // top:8px;
        i{
            color:#fff;
            font-style:normal;
            margin-left:5px;
        }
        &:hover{
            border:1px solid #e4393c;
            i{
                color:#e4393c;
                display:inline-block;
                
            }
        }
    }
}